<template>
    <div>
        <div class="crumbs">
            <div class="title">选择领域</div>
            <div class="select">
                <el-select v-model="select" placeholder="请选择">
                    <el-option
                    v-for="item in options"
                    :key="item"
                    :label="item"
                    :value="item">
                    </el-option>
                </el-select>
            </div>
        </div>
        <div class="container">
            <div class="road">
                <div class="roadTitle">技术路线步骤</div>
                <div class="content">
                    <div class="item" v-for="(item, i) of road" :key="i">
                        <img v-if="i<5" :src="arrow(i)" :alt="i+1" class="arrow" :class="oddOrEven(i+1)">
                        <div @click="toggle(i)" class="box" :class="[oddOrEven(i+1), { current: current === i}]">
                            <img :src="icon(i)" :alt="i+1">
                            <div class="itemTitle" :class="oddOrEven(i+1)">{{ i+1+'.'+item }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data: function(){
            return {
                road: [
                    '文件结构',
                    '标签抽取',
                    '实体归类',
                    '实体关联',
                    '知识集聚',
                    '知识图谱可视化',
                ],
                current: 0,
                options: ['官网', '规划', '测绘', '安全'],
                select: ''
            }
        },
        methods: {
            icon (i) {
                return require(`@/assets/img/home/step${i+1}${this.current===i?'-sel':''}.png`)
            },
            arrow (i) {
                let up = require(`@/assets/img/home/arrow-up.png`)
                let down = require(`@/assets/img/home/arrow-down.png`)
                return i%2 === 0 ? down : up
            },
            oddOrEven (i) {
                return i%2 === 0 ? 'even' : 'odd'
            },
            toggle (i) {
                this.current = i
            }
        }
    }
</script>

<style scoped>
.crumbs {
    height: 36px;
}
.title {
    font-size: 22px;
    color: #9098ad;
    float: left;
}
.select {
    float: right;
    height: 36px;
}
.container{
    min-height: 808px;
}
.road {
    display: flex;
    height: 240px;
}
.roadTitle {
    flex: 1;
    min-width: 110px;
    font-size: 18px;
    color: #9098ad;
}
.content {
    flex: 10;
    display: flex;
    min-width: 1100px;
}
.item {
    flex: 1;
    position: relative;
}
.arrow {
    position: absolute;
    top: 90px;
    left: 115px;
}
.box {
    position: absolute;
}
.box.odd {
    top: 11px;
}
.box.even {
    bottom: 0;
}
.itemTitle {
    width: 133px;
    text-align: center;
    color: #62749d;
    position: ab;
}
.current .itemTitle {
    color: #ff430e;
}
</style>